// 用户登录界面
<template class = "body-authorLogin">
  <div class="content-authorLogin">
    <div id="authorLoginImge">
      <el-image :src="imgUrl"></el-image>
    </div>
    <div id="loginDiv">
      <h4>注册</h4>
      <el-divider style="margin-top: 10px;"></el-divider>
      <div>
        <div style="width:100%;margin:auto">
          <el-upload
            class="avatar-uploader"
            style="text-align: center;"
            action="/api/fileUtils/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <el-avatar :size="size" v-if="avatarUrl" :src="GLOBAL.BASE_URL + 'image/' + avatarUrl"></el-avatar>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div>
          <el-input placeholder="请输入用户名" v-model="author.userName" />
        </div>
        <div style="  margin-top: 10px;">
          <el-input v-model="author.userReal" placeholder="请输入用户真实姓名" auto-complete="off"></el-input>
        </div>
        <div style="  margin-top: 10px;">
          <el-input v-model="author.phone" placeholder="请输入用户手机号" auto-complete="off"></el-input>
        </div>
        <div style="  margin-top: 10px;">
          <el-input placeholder="请输入密码" v-model="author.rawPassword" show-password />
        </div>
        <div style="  margin-top: 10px;width:100%">
          <el-select v-model="author.sex" :placeholder="性别" style="width:100%">
            <el-option label="女" value="0"></el-option>
            <el-option label="男" value="1"></el-option>
          </el-select>
        </div>
        <div style="  margin-top: 20px;">
          <el-button type="primary" style="width:100%" @click="register()">注册</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import md5 from "js-md5";
export default {
  data() {
    return {
      imgUrl: require("../../assets/authorLogin.png"),
      avatarUrl: "",
      author: {
        userName: "",
        password: "",
        rawPassword: "",
        verCode: "",
        phone:"",
      },
    };
  },
  methods: {
    register() {
      this.author.avatarUrl = this.avatarUrl;
      if (this.avatarUrl === "") {
        this.$message.warning("请选择头像");
        return;
      }
      this.author.password = this.author.rawPassword;
      this.COMMON.httpPost(
        this,
        "userOperation/authorRegister",
        this.author,
        (result) => {
          if (result.result == "SUCCESS") {
            //将用户信息存储到本地
            localStorage.user = JSON.stringify(result.data || []);
            this.$cookies.set("user" ,result.data);   // return this
            //进入主界面
            this.$router.push({ path: "/index" });
          } else {
          }
        },
        (result) => {}
      );
    },
    handleAvatarSuccess(res, file) {
      if (res.result == "SUCCESS") {
        this.avatarUrl = res.detail;
      } else {
        this.$message.error("图片插入失败");
      }
    },
  },
};
</script>

<style>
.body-authorLogin {
  height: 100%;
  width: 100%;
}
.content-authorLogin {
  background-color: rgb(245, 245, 245);
  height: 100%;
  width: 100%;
  display: flex;
}
#loginDiv {
  background-color: white;
  margin: auto;
  width: 20%;
  height: 60%;
  position: relative;
  padding-top: 20px;
  padding-bottom: 50px;
  padding-left: 40px;
  padding-right: 40px;
}
#authorLoginImge {
  margin: auto;
  width: 20%;
  position: relative;
  padding-bottom: 50px;
  padding-left: 40px;
  padding-right: 40px;
}
</style>